<script setup lang="ts">
defineOptions({
	// eslint-disable-next-line vue/no-reserved-component-names
	name: "Dashboard",
	inheritAttrs: false,
});

import moment from "moment"
import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
import {Audit, Income, MonthMoney} from "@/api/dashboard/types";

/**
 * 待办事项
 */
const audit = reactive<Audit>({
	total: '100',
	finance: '10',
	client: '30',
	warehouse: '30',
	other: '30',
})
/**
 * 期初应收
 */
const income = reactive<Income>({
	total: '19975.56',
	tm: '1577.33',
	jd: '1873.44',
	dy: '1774.88',
	ks: '1994.23',
	other: '2776.15',
})
/**
 * 应收周期
 */
const incomeCircle = reactive<Income>({
	total: '27764.56',
	tm: '2677.33',
	jd: '1899.44',
	dy: '3641.88',
	ks: '1890.23',
	other: '2777.15',
})
/**
 * 本期发生
 */
const current = reactive<Income>({
	total: '19977.56',
	tm: '1677.33',
	jd: '2880.44',
	dy: '355.00',
	ks: '0',
	other: '144',
})
/**
 * 销售金额
 */
const sell = reactive<Income>({
	total: '37796.56',
	tm: '2874.33',
	jd: '5478.00',
	dy: '669.00',
	ks: '1904.03',
	other: '5212.44',
})
/**
 * 平台佣金
 */
const commission = reactive<Income>({
	total: '7780.22',
	tm: '1399.56',
	jd: '4382.11',
	dy: '8891.00',
	ks: '2213.00',
	other: '123.00',
})
/**
 * 营销费用
 */
const market = reactive<Income>({
	total: '553134.89',
	tm: '12980.71',
	jd: '8989.66',
	dy: '10784.23',
	ks: '35501.00',
	other: '5549.53',
})
/**
 * 平台利润
 */
const profit = reactive<Income>({
	total: '43559.12',
	tm: '23481.87',
	jd: '4412.90',
	dy: '5688.77',
	ks: '8970.34',
	other: '2845.61',
})

const data = reactive<MonthMoney>({
	wqrje: '634285.42',
	currentMonth: {
		month: '本月',
		qrsrje: '213424.53',
		yqrje: '12376.00',
		jtkje: '412.50',
		tkje: '968.77',
	},
	lastMonth: {
		month: '9月',
		qrsrje: '174678.53',
		yqrje: '224823.00',
		jtkje: '4123.50',
		tkje: '1689.77',
	},
	llMonth: {
		month: '8月',
		qrsrje: '469743.53',
		yqrje: '654454.00',
		jtkje: '7311.50',
		tkje: '3458.79',
	},
})

const userStore = useUserStore();

const date: Date = new Date();
const total = ref('1000.00')

const greetings = computed(() => {
	if (date.getHours() >= 6 && date.getHours() < 8) {
		return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
	} else if (date.getHours() >= 8 && date.getHours() < 12) {
		return "上午好🌞！";
	} else if (date.getHours() >= 12 && date.getHours() < 18) {
		return "下午好☕！";
	} else if (date.getHours() >= 18 && date.getHours() < 24) {
		return "晚上好🌃！";
	} else if (date.getHours() >= 0 && date.getHours() < 6) {
		return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
	}
});

const duration = 5000;

// 收入金额
const amount = ref(0);
const amountOutput = useTransition(amount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;

// 访问数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;

//消息数
const messageCount = ref(0);
const messageCountOutput = useTransition(messageCount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo,
});
messageCount.value = 2000;

// 订单数
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo,
});

function format_money(money: any) {
	const splitMoney = (money + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',').split('.')
	if (splitMoney.length > 1) {
		return `${splitMoney[0]}.<span style="font-size:12px;display: contents;">${splitMoney[1]}</span>`;
	}else{
		return `${splitMoney[0]}`;
	}
}

const radio1 = ref('New York')
orderCount.value = 2000;

</script>

<template>
	<div class="dashboard-container">
		<!-- 待办事项 -->
		<el-row :gutter="40">
			<el-col>
				<el-row :gutter="40">
					<el-col :xs="22" :sm="12" :lg="4">
						<div class="data-box">
							<div
									class="text-[#f5222d] hover:!text-white hover:bg-[#f5222d] p-3 rounded"
							>
								<svg-icon icon-class="monitor" size="3em" />
							</div>
							<div class="flex flex-col space-y-3">
								<div>待办事项</div>
								<div class="text-lg text-right">
									{{ audit.total }}
								</div>
							</div>
						</div>
					</el-col>

					<!--消息数-->
					<el-col :xs="22" :sm="12" :lg="5">
						<div class="data-box">
							<div
									class="text-[#f5222d] hover:!text-white hover:bg-[#f5222d] p-3 rounded"
							>
								<svg-icon icon-class="money" size="3em" />
							</div>
							<div class="flex flex-col space-y-3">
								<div>财务</div>
								<div class="text-lg text-right">
									{{ audit.finance }}
								</div>
							</div>
						</div>
					</el-col>

					<el-col :xs="22" :sm="12" :lg="5">
						<div class="data-box">
							<div
									class="text-[#f5222d] hover:!text-white hover:bg-[#f5222d] p-3 rounded"
							>
								<svg-icon icon-class="message" size="3em" />
							</div>
							<div class="flex flex-col space-y-3">
								<div>客服</div>
								<div class="text-lg text-right">
									{{ audit.client }}
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="22" :sm="12" :lg="5">
						<div class="data-box">
							<div
									class="text-[#f5222d] hover:!text-white hover:bg-[#f5222d] p-3 rounded"
							>
								<svg-icon icon-class="homepage" size="3em" />
							</div>
							<div class="flex flex-col space-y-3">
								<div>仓库</div>
								<div class="text-lg text-right">
									{{ audit.warehouse }}
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="22" :sm="12" :lg="5">
						<div class="data-box">
							<div
									class="text-[#f5222d] hover:!text-white hover:bg-[#f5222d] p-3 rounded"
							>
								<svg-icon icon-class="menu" size="3em" />
							</div>
							<div class="flex flex-col space-y-3">
								<div>其他部门</div>
								<div class="text-lg text-right">
									{{ audit.other }}
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<!--    <el-divider style="background-color: floralwhite;height:2px;"/>-->
		<div style="margin-top: 25px;">
			<div style="width: 39%; height: 100%; display: inline-block; float: left;">
				<div class="data-box-left" style="height: 100%">
					<!--未确认金额-->
					<div style="height: 50px;">
						<div style="width:10%;height: 100%;float: left;">
							<div style="text-align: center;height: 100%">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/wqrje.png"/>
								</div>
							</div>
						</div>
						<div style="width:22%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;">
							本月未确认金额
						</div>
						<div class="number-div" style="height: 100%;float: left;display: flex;justify-content: left;align-items: center;font-weight: bold;" v-html="format_money(data.wqrje)"></div>
					</div>
					<el-divider style="background-color: floralwhite;height:2px;"/>
					<!--订单月份-->
					<div style="width: 100%;margin:0 auto;float: left">
						<div style="width:25%; height:70px;float: left;">
							<div class="common-title" style="font-weight: bold;display: flex;justify-content: center;align-items: center;">

							</div>
						</div>
						<!--本月-->
						<div class="left-data-box-item">
							<div class="common-title">
								{{data.currentMonth.month}}
							</div>
						</div>
						<!--上月-->
						<div class="left-data-box-item">
							<div class="common-title">
								{{data.lastMonth.month}}
							</div>
						</div>
						<!--上上月-->
						<div class="left-data-box-item">
							<div class="common-title">
								{{data.llMonth.month}}
							</div>
						</div>
					</div>
					<!--确认收入金额-->
					<div style="width: 100%;margin:0 auto;float: left">
						<div style="width:25%; height:70px;float: left;">
							<div class="logo-img">
								<div style="text-align: center;height: 100%">
									<div class="content">
										<img style="width: 100%;object-fit: contain;" src="@/assets/qrsrje.png"/>
									</div>
								</div>
							</div>
							<div class="logo-title">
								确认收入金额
							</div>
						</div>
						<!--本月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.currentMonth.qrsrje)">

							</div>
						</div>
						<!--上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.lastMonth.qrsrje)">

							</div>
						</div>
						<!--上上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.llMonth.qrsrje)">

							</div>
						</div>
					</div>
					<!--已确认金额-->
					<div style="width: 100%;margin:0 auto;float: left">
						<div style="width:25%; height:70px;float: left;">
							<div class="logo-img">
								<div style="text-align: center;height: 100%">
									<div class="content">
										<img style="width: 100%;object-fit: contain;" src="@/assets/yqrje.png"/>
									</div>
								</div>
							</div>
							<div class="logo-title">
								已确认金额
							</div>
						</div>
						<!--本月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.currentMonth.yqrje)">

							</div>
						</div>
						<!--上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.lastMonth.yqrje)">

							</div>
						</div>
						<!--上上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.llMonth.yqrje)">

							</div>
						</div>
					</div>
					<!--仅退款金额-->
					<div style="width: 100%;margin:0 auto;float: left">
						<div style="width:25%; height:70px;float: left;">
							<div class="logo-img">
								<div style="text-align: center;height: 100%">
									<div class="content">
										<img style="width: 100%;object-fit: contain;" src="@/assets/jtkje.png"/>
									</div>
								</div>
							</div>
							<div class="logo-title">
								仅退款金额
							</div>
						</div>
						<!--本月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.currentMonth.jtkje)">

							</div>
						</div>
						<!--上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.lastMonth.jtkje)">

							</div>
						</div>
						<!--上上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.llMonth.jtkje)">

							</div>
						</div>
					</div>
					<!--退款金额-->
					<div style="width: 100%;margin:0 auto;float: left">
						<div style="width:25%; height:70px;float: left;">
							<div class="logo-img">
								<div style="text-align: center;height: 100%">
									<div class="content">
										<img style="width: 100%;object-fit: contain;" src="@/assets/tkje.png"/>
									</div>
								</div>
							</div>
							<div class="logo-title">
								退款金额
							</div>
						</div>
						<!--本月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.currentMonth.tkje)">

							</div>
						</div>
						<!--上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.lastMonth.tkje)">

							</div>
						</div>
						<!--上上月-->
						<div class="left-data-box-item">
							<div class="common-title number-div" v-html="format_money(data.llMonth.tkje)">

							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 60%; height: 100%; display: inline-block; margin-left: 0; float: right;">
				<div class="data-box-right">
					<!--平台展示行-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;"></div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/tm.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">天猫</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/jd.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">京东</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/dy.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">抖音</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/ks.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">快手</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/other.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">其他平台</span>
							</div>
						</div>
					</div>
					<!--期初应收-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;">
							<div class="number-div">
								<span class="sum-header">期初应收</span><br>
								<span class="sum-text" v-html="format_money(income.total)"></span>
							</div>
						</div>
						<!--天猫-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(income.tm)"></span>
							</div>
						</div>
						<!--京东-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(income.jd)"></span>
							</div>
						</div>
						<!--抖音-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(income.dy)"></span>
							</div>
						</div>
						<!--快手-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(income.ks)"></span>
							</div>
						</div>
						<!--其他平台-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(income.other)"></span>
							</div>
						</div>
					</div>
					<!--应收周期-->
					<div style="width: 100%;margin:0 auto;">
						<!--应收周期-->
						<div style="width:20%; height:70px;float: left;">
							<div class="number-div">
								<span class="sum-header">应收周期</span><br>
								<span class="sum-text" v-html="format_money(incomeCircle.total)"></span>
							</div>
						</div>
						<!--天猫-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(incomeCircle.tm)"></span>
							</div>
						</div>
						<!--京东-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(incomeCircle.jd)"></span>
							</div>
						</div>
						<!--抖音-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(incomeCircle.dy)"></span>
							</div>
						</div>
						<!--快手-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(incomeCircle.ks)"></span>
							</div>
						</div>
						<!--其他平台-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(incomeCircle.other)"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="data-box-right" style="margin-top: 20px;margin-bottom: 20px;">
					<!--平台展示行-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;">
							<div style="width: 100%">
								<div class="number-div">
									<span class="sum-title">本期发生</span>
								</div>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/tm.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">天猫</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/jd.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">京东</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/dy.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">抖音</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/ks.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">快手</span>
							</div>
						</div>
						<div class="data-box-item">
							<div class="logo">
								<div class="content">
									<img style="width: 100%;object-fit: contain;" src="@/assets/other.png"/>
								</div>
							</div>
							<div style="text-align: center;height: 40%;">
								<span style="line-height: 28px;vertical-align: middle;">其他平台</span>
							</div>
						</div>
					</div>
					<!--应收余额-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;">
							<div class="number-div">
								<span class="sum-header">应收余额</span><br>
								<span class="sum-text" v-html="format_money(current.total)"></span>
							</div>
						</div>
						<!--天猫-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(current.tm)"></span>
							</div>
						</div>
						<!--京东-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(current.jd)"></span>
							</div>
						</div>
						<!--抖音-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(current.dy)"></span>
							</div>
						</div>
						<!--快手-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(current.ks)"></span>
							</div>
						</div>
						<!--其他平台-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(current.other)"></span>
							</div>
						</div>
					</div>
					<!--销售金额-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;">
							<div class="number-div">
								<span class="sum-header">销售金额</span><br>
								<span class="sum-text" v-html="format_money(sell.total)"></span>
							</div>
						</div>
						<!--天猫-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(sell.tm)"></span>
							</div>
						</div>
						<!--京东-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(sell.jd)"></span>
							</div>
						</div>
						<!--抖音-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(sell.dy)"></span>
							</div>
						</div>
						<!--快手-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(sell.ks)"></span>
							</div>
						</div>
						<!--其他平台-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(sell.other)"></span>
							</div>
						</div>
					</div>
					<!--平台佣金-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;">
							<div class="number-div">
								<span class="sum-header">平台佣金</span><br>
								<span class="sum-text" v-html="format_money(commission.total)"></span>
							</div>
						</div>
						<!--天猫-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(commission.tm)"></span>
							</div>
						</div>
						<!--京东-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(commission.jd)"></span>
							</div>
						</div>
						<!--抖音-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(commission.dy)"></span>
							</div>
						</div>
						<!--快手-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(commission.ks)"></span>
							</div>
						</div>
						<!--其他平台-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(commission.other)"></span>
							</div>
						</div>
					</div>
					<!--营销费用-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;">
							<div class="number-div">
								<span class="sum-header">营销费用</span><br>
								<span class="sum-text" v-html="format_money(market.total)"></span>
							</div>
						</div>
						<!--天猫-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(market.tm)"></span>
							</div>
						</div>
						<!--京东-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(market.jd)"></span>
							</div>
						</div>
						<!--抖音-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(market.dy)"></span>
							</div>
						</div>
						<!--快手-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(market.ks)"></span>
							</div>
						</div>
						<!--其他平台-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(market.other)"></span>
							</div>
						</div>
					</div>
					<!--平台利润-->
					<div style="width: 100%;margin:0 auto;">
						<div style="width:20%; height:70px;float: left;">
							<div class="number-div">
								<span class="sum-header">平台利润</span><br>
								<span class="sum-text" v-html="format_money(profit.total)"></span>
							</div>
						</div>
						<!--天猫-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(profit.tm)"></span>
							</div>
						</div>
						<!--京东-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(profit.jd)"></span>
							</div>
						</div>
						<!--抖音-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(profit.dy)"></span>
							</div>
						</div>
						<!--快手-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(profit.ks)"></span>
							</div>
						</div>
						<!--其他平台-->
						<div class="data-box-item">
							<div class="number-div">
								<span class="sum-number" v-html="format_money(profit.other)"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
  }

  .github-corner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 99;
	border: 0;
  }

  .data-box {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	font-weight: bold;
	color: var(--el-text-color-regular);
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color);
	box-shadow: var(--el-box-shadow-dark);
	border-radius: 10px;
  }

  .data-box-left {
	color: var(--el-text-color-regular);
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color);
	box-shadow: var(--el-box-shadow-dark);
	border-radius: 10px;
	padding: 20px;
	text-align:center;
	min-height: 1em;
	overflow: auto;
  }

  .data-box-right {
	color: var(--el-text-color-regular);
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color);
	box-shadow: var(--el-box-shadow-dark);
	border-radius: 10px;
	padding: 20px;
	min-height: 1em;
	overflow: auto;
  }

  .left-data-box-item {
	width:25%;
	float: left;
	height: 70px;
  }


  .left-data-box-item .content{
	margin:0 auto;
	height: 100%;
	width: 30%;overflow: hidden;display: flex;align-items: center;border-radius: 10px;
  }

  .data-box-item {
	width:16%;
	height:70px;
	float: left;
  }

  .content{
	margin:0 auto;
	height: 100%;
	width: 40%;overflow: hidden;display: flex;align-items: center;border-radius: 10px;
  }

  .data-box-item .content{
	margin:0 auto;
	height: 100%;
	width: 40%;overflow: hidden;display: flex;align-items: center;border-radius: 10px;
  }

  .data-box-item .logo {
	text-align: center;height: 77%
  }

  .sum-header {
	line-height: 35px;vertical-align: middle;
	font-weight:bold;
  }

  .sum-text{
	vertical-align: middle;font-weight: bold;
  }

  .common-title{
	text-align: center;height: 100%;
	transition: transform .2s;
	font-weight: bold;display: flex;justify-content: center;align-items: center;
  }

  .number-div{
	text-align: center;height: 100%;
	transition: transform .2s;
	&:hover {
	  -ms-transform: scale(1.1); /* IE 9 */
	  -webkit-transform: scale(1.1); /* Safari 3-8 */
	  transform: scale(1.1);
	  color: #f5222d;
	  cursor: pointer;
	}
  }

  .sum-number {
	line-height: 70px;vertical-align: middle;
	font-weight: bold;
  }

  .sum-title {
	line-height: 70px;vertical-align: middle;font-weight: bold;
  }

  .svg-icon {
	fill: currentcolor !important;
  }

  .data-box-qcys {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	font-weight: bold;
	color: var(--el-text-color-regular);
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color);
	box-shadow: var(--el-box-shadow-dark);
	border-radius: 3%;
	height: 100%;
  }

  .qcys-img{
	max-width: 100%;
	height: auto;
	position: absolute;
  }

  .el-divider--horizontal {
	display: block;
	height: 1px;
	width: 100%;
	margin: 12px 0;
	border-top: 1px var(--el-border-color) var(--el-border-style);
  }

  .logo-img {
	width:40%;height: 100%;float: left;
  }
  .logo-title{
	width:60%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;font-size: 15px;
  }
}
</style>
